<template>
  <div
    class="zpon-flexbox"
    :class="direction == 'vertical' ? 'zpon-flexbox-vertical' : 'zpon-flexbox-horizontal'"
  >
    <slot></slot>
  </div>
</template>

<script type="text/babel">
export default {
  name: 'zpon-flexbox',
  props: {
    direction: {
      validator (value) {
        return ['horizontal', 'vertical'].indexOf(value) > -1
      },
      default: 'horizontal'
    }
  }
}
</script>

<style lang="scss">
@import "../../../styles/components/flesbox.scss";
</style>
